<template>
  <view class="food-luck-container">
    <!-- 顶部导航栏 -->
    <view class="status-bar" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
      <view class="nav-bar">
        <view class="nav-bar-left">
          <image src="/static/arrow-left-fill.png" class="nav-back-icon" @click="goBack" />
        </view>
        <view class="nav-bar-title">食神</view>
      </view>
    </view>
    <view class="status-height-color" :style="{ height: navHeight + 'px', 'padding-top': statusBarHeight + 'px' }">
    </view>

    <!-- 顶部图片区域 -->
    <view class="banner-image">
      <image src="/static/food-banner.png" mode="aspectFill"></image>
    </view>

    <!-- AI食谱生成中提示 -->
    <view class="ai-generating-tip" v-if="isLoading && !isDataAvailable && hasZodiacInfo">
      <view class="generating-text">
        <text>AI食谱正在</text>
        <text class="highlight-text">生成中</text>
        <text class="dots">......</text>
      </view>
    </view>

    <view class="food-luck-content" v-if="isDataAvailable">
      <!-- 命理档案部分 -->
      <view class="info-section">
        <view class="section-header">
          <view class="icon-wrapper">
            <image src="/static/1.png" mode="aspectFill"></image>
          </view>
          <text class="section-title">命理档案</text>
        </view>

        <view class="section-content">
          <view class="info-row">
            <text class="info-label">您的命理：</text>
            <text class="info-value">{{ mldaInfo.mingLi }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">今日天时：</text>
            <text class="info-value">{{ mldaInfo.tianShi }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">核心建议：</text>
            <text class="info-value">{{ mldaInfo.jianYi }}</text>
          </view>
        </view>
      </view>
      <!-- 今日运势部分 -->
      <view class="info-section">
        <view class="section-header">
          <view class="icon-wrapper">
            <image src="/static/2.png" mode="aspectFill"></image>
          </view>
          <text class="section-title">今日运势</text>
        </view>

        <view class="section-content">
          <view class="info-row">
            <text class="info-label">事业：</text>
            <text class="info-value">{{ jrysInfo.shiYe }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">情感：</text>
            <text class="info-value">{{ jrysInfo.qingGan }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">财位：</text>
            <text class="info-value">{{ jrysInfo.caiWei }}</text>
          </view>
        </view>
      </view>
      <!-- 推荐菜品部分 -->
      <view class="info-section">
        <view class="section-header">
          <view class="icon-wrapper">
            <image src="/static/3.png" mode="aspectFill"></image>
          </view>
          <text class="section-title">推荐菜品</text>
        </view>

        <view class="food-list">
          <view v-for="(item, index) in recommendedFoods" :key="index" class="food-item">
            <!-- <view class="food-image">
              <image :src="item.image" mode="aspectFill"></image>
            </view> -->
            <view class="food-info">
              <view class="food-name">{{ item.name }}</view>
              <view class="food-property">
                <!-- <text class="property-label">五行：</text> -->
                <text class="property-value">{{ item.wuxing }}</text>
              </view>
              <view class="food-property">
                <!-- <text class="property-label">补益：</text> -->
                <text class="property-value">{{ item.benefit }}</text>
              </view>
              <view class="food-property">
                <!-- <text class="property-label">节气：</text> -->
                <text class="property-value">{{ item.season }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="no-data-content" v-if="!isDataAvailable && !isLoading">
      <view class="no-data-text">
        <view>由于信息缺失</view>
        <view>无法生成AI食谱</view>
      </view>
      <view class="no-data-btn-text" @click="goPerfectInfo">
        去完善资料
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      navHeight: "", //整体顶部导航栏的高度
      statusBarHeight: "", //状态栏高度
      recommendedFoods: [],
      foodLuckData: null,
      isDataAvailable: false,
      isLoading: false, // 新增加载状态
      hasZodiacInfo: false, // 是否有生肖信息
      // 命理档案数据
      mldaInfo: {
        mingLi: '',
        tianShi: '',
        jianYi: ''
      },
      // 今日运势数据
      jrysInfo: {
        shiYe: '',
        qingGan: '',
        caiWei: ''
      }
    }
  },
  onLoad() {
    let { statusBarHeight, system } = uni.getSystemInfoSync();
    this.statusBarHeight = statusBarHeight;
    this.navHeight = statusBarHeight + (system.indexOf("iOS") > -1 ? 44 : 48);

    // 加载食运数据
    this.loadFoodLuckData();
  },
  methods: {
    goBack() {
      // 返回时重置食运按钮状态
      // uni.webView.postMessage({
      //   data: {
      //     action: "resetFoodLuckActive",
      //   },
      // });
      uni.navigateBack();
    },
    goPerfectInfo() {
      uni.navigateTo({
        url: '/minePages/login2'
      })
    },
    shareContent() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    },

    // 获取食运数据
    loadFoodLuckData() {
      // 获取用户信息
      const userInfo = uni.getStorageSync('userInfo') || {};
      const userid = userInfo.userid || userInfo.data?.userid || '';
      // 检查生肖字段是否存在
      if (!userInfo.zodiac) {
        this.hasZodiacInfo = false;
        this.isDataAvailable = false;
        this.isLoading = false;
        return;
      }
      this.hasZodiacInfo = true; // 有生肖信息
      this.isLoading = true; // 开始加载
      // 调用接口
      this.$Request.postApi("/bot/api/agentcgetmyfoodluck", { userid })
        .then(res => {
          uni.hideLoading();
          this.isLoading = false; // 加载完成
          if (res.status === 1 && res.data) {
            this.foodLuckData = res.data;
            this.isDataAvailable = true;

            // 处理命理档案数据
            if (res.data.mlda && res.data.mlda.length >= 3) {
              this.mldaInfo = {
                mingLi: res.data.mlda[0] || '',
                tianShi: res.data.mlda[1] || '',
                jianYi: res.data.mlda[2] || ''
              };
            }

            // 处理今日运势数据
            if (res.data.jrys && res.data.jrys.length >= 3) {
              this.jrysInfo = {
                shiYe: res.data.jrys[0] || '',
                qingGan: res.data.jrys[1] || '',
                caiWei: res.data.jrys[2] || ''
              };
            }

            // 处理推荐菜品数据
            if (res.data.tjcp && res.data.tjcp.length > 0) {
              this.recommendedFoods = res.data.tjcp.map(item => {
                return {
                  name: item.name || "推荐菜品",
                  image: "/static/foodluck/food1.jpg", // 使用默认图片
                  wuxing: item.wx || "",
                  benefit: item.by || "",
                  season: item.jq || ""
                }
              });
            }
          } else {
            this.isDataAvailable = false;
            uni.showToast({
              title: res.message || '获取数据失败',
              icon: 'none'
            });
          }
        })
        .catch(err => {
          uni.hideLoading();
          this.isLoading = false; // 加载失败
          this.isDataAvailable = false;
          console.error('获取食运数据失败', err);
          uni.showToast({
            title: '获取数据失败，请重试',
            icon: 'none'
          });
        });
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.food-luck-container {
  padding-bottom: 40rpx;
}

.status-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: 500;
  font-size: 35rpx;

  .nav-bar {
    display: flex;
    align-items: center;
    width: 100%;

    .nav-bar-left {
      display: flex;
      align-items: center;
      margin-left: 32rpx; // 距离左侧

      .nav-back-icon {
        width: 60rpx;
        height: 60rpx;
      }
    }

    .nav-bar-title {
      flex: 1;
      text-align: center;
      font-size: 35rpx;
      font-weight: 500;
      color: #000000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .nav-bar-right {
      margin-right: 32rpx;

      .nav-share-icon {
        width: 46.15rpx;
        height: 46.15rpx;
      }
    }
  }
}

/* 顶部图片区域 */
.banner-image {
  width: 100%;
  height: 264rpx;
  overflow: hidden;
  image {
    width: 100%;
    height: 100%;
  }
}

/* 信息区块公共样式 */
.info-section {
  margin: 30rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  padding: 24rpx 20rpx;
  border-bottom: 1px solid #f5f5f5;
}

.icon-wrapper {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.section-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.section-content {
  padding: 20rpx;
}

.info-row {
  display: flex;
  margin-bottom: 16rpx;
  line-height: 1.5;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.info-value {
  font-size: 28rpx;
  color: #666;
  flex: 1;
}

/* 推荐菜品样式 */
.food-list {
  padding: 20rpx;
}

.food-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.food-item:last-child {
  border-bottom: none;
}

.food-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 12rpx;
  overflow: hidden;
  margin-right: 20rpx;
  background-color: pink;

  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.food-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.food-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.food-property {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 6rpx;
  display: flex;
}

.property-label {
  color: #333;
}

.property-value {
  flex: 1;
}

/* 图标字体 */
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_2312745_a1da3j2gsc.woff2') format('woff2');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 32rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-file:before {
  content: "\e7b9";
}

.icon-star:before {
  content: "\e7df";
}

.icon-food:before {
  content: "\e7c1";
}

.no-data-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 100rpx;
}

.no-data-text {
  text-align: center;
  width: 300rpx;
  font-weight: 400;
  font-size: 30rpx;
  color: rgba(0, 0, 0, 0.5);
}

.no-data-btn-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 231rpx;
  height: 74rpx;
  border-radius: 61rpx 61rpx 61rpx 61rpx;
  border: 2rpx solid #2263EC;
  margin-top: 60rpx;
  font-weight: 500;
  font-size: 30rpx;
  color: #2263EC;
}

/* AI食谱生成中提示样式 */
.ai-generating-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx 30rpx;


  .generating-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40rpx 60rpx;



    text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      line-height: 1.2;
    }

    .highlight-text {
      color: #2263EC;
      font-weight: 600;
      margin: 0;
    }

    .dots {
      color: #666;
      font-size: 28rpx;
      animation: blink 1.5s infinite;
      margin-top: 8rpx;
    }
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}
</style>